function setAnimateStyle({map,size=40}) {
    let canvas = document.createElement("canvas");
    canvas.width = size;
    canvas.height = size;
    let ctx = canvas.getContext("2d")
    let radius = size / 4; //10;
    let increase = true;
    /* 
    10~14 
    <10 true ++
    >14 false --
    */
    function frame() {
        /* 清空ctx */
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        ctx.beginPath();
        ctx.arc(size / 2, size / 2, radius, 0, Math.PI * 2);
        ctx.closePath();
        ctx.fillStyle = "#ff2d51";
        ctx.fill();

        

        if (radius < size / 4) {
            increase = true;
        } else if (radius > (size / 4 + 4)) {
            increase = false;
        }
        if (increase) {
            radius++;
        } else {
            radius--
        }
        setTimeout(frame, 100)
        /* 重新渲染地图 */
        map.render();
    }
    frame();
    let style = new ol.style.Style({
        image: new ol.style.Icon({
            img: canvas,
            imgSize: [canvas.width, canvas.height]
        })
    })
    return style;
}

function setAnimateCircleStyle({map,size=50}) {
    let canvas = document.createElement("canvas");
    canvas.width = size;
    canvas.height = size;
    let ctx = canvas.getContext("2d")
    let radius = size / 4;
    let increase = true;
    function frame() {
      /* 清空ctx */
      ctx.clearRect(0, 0, canvas.width, canvas.height);
      // 内部实心圆
      ctx.beginPath();
      ctx.arc(size / 2, size / 2, size / 4, 0, Math.PI * 2);
      ctx.closePath();
      ctx.fillStyle = "#1248F8";
      ctx.fill();
  
      // 外边框圆
      ctx.beginPath()
      ctx.arc(size / 2, size / 2, radius, 0, Math.PI * 2)
      ctx.closePath();
      // 空心圆边框的颜色
      ctx.strokeStyle = "#ff2d51"; 
      // 边框宽度
      ctx.lineWidth = 1; 
      // 描边空心圆边框
      ctx.stroke(); 
  
      if (radius < size / 4) {
        increase = true;
      } else if (radius > (size / 4 + 3)) {
        increase = false;
      }
      if (increase) {
        radius++;
      } else {
        radius--
      }
      setTimeout(frame, 100)
      /* 重新渲染地图 */
      map.render();
    }
    frame();
    let style = new ol.style.Style({
      image: new ol.style.Icon({
        img: canvas,
        imgSize: [canvas.width, canvas.height]
      })
    })
    return style;
  }

  export {
    setAnimateStyle,
    setAnimateCircleStyle
  }